<template>
    <div class="upload">
        <div class="upload-img-wrap">
            <el-upload class="upload-img-item" :action="uploadUrl" :headers="headers" :data="fileData" name="iFile"
                :show-file-list="false" :on-progress="handleProgress" :on-success="handleSuccess"
                :before-upload="handleBeforeUpload" :accept="accept" v-if="!imgUrls">
                <i class="el-icon-picture-outline" style="font-size: 24px"></i>
                <el-progress :percentage="precent" :stroke-width="2" :show-text="false" class="progress"
                    v-if="showProgress"></el-progress>
            </el-upload>
            <div class="upload-img-item" v-else @click="previewImg">
                <el-image :src="imgUrls" fit="contain" class="upload-img">
                    <div slot="error" class="image-slot">
                        <p>暂无图片</p>
                    </div>
                </el-image>
                <i class="el-icon-error btndel" @click.stop="removeImg"></i>
            </div>
        </div>
        <template v-if="ImgVisible">
            <preview-image :ImgVisible="ImgVisible" @close="close" :imgSrc="imgUrls"></preview-image>
        </template>
    </div>
</template>
<script>
import hostUrl from "@/utils/baseUrl.js";
import { deleteFile } from "@/api/upload.js";
import previewImage from './previewImage.vue';
export default {
    components: { previewImage },
    name: "uploadSingleImg",
    props: {
        imgUrl: {
            type: String,
            default: "",
        },
        fileType: {
            type: String,
            default: "10",
        },
        accept: {
            type: String,
            default: ".png, .jpg, .jpeg, .gif",
        },
    },
    watch: {
        imgUrl: {
            immediate: true,
            handler(newV, oldV) {
                this.imgUrls = newV;
            }
        }
    },
    data() {
        return {
            imgUrls: this.imgUrl,
            dialogVisible: false,
            uploadUrl: hostUrl + "/uploadFile",
            headers: {
                Authorization: localStorage.getItem("Supply-Access-Token")
                    ? localStorage.getItem("Supply-Access-Token")
                    : "",
            },
            fileData: {
                type: 10,
            },
            showHandle: false,
            precent: 0,
            showProgress: false,
            ImgVisible: false,
        };
    },
    created() { },
    methods: {
        handleBeforeUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.warning("文件大小不能超过 2MB!");
            }
            return isLt2M;
        },
        handleProgress(event) {
            this.showProgress = true;
            this.precent = Math.round((event.loaded / event.total) * 100);
        },
        handleSuccess(res) {
            if (res.code == 0) {
                this.$nextTick(() => {
                    this.imgUrls = res.file_url;
                    this.showHandle = false;
                    this.showProgress = false;
                    this.precent = 0;
                    this.$emit("handleSuccess", this.imgUrls);
                })

            } else {
                this.$message.error(res.msg);
                this.showProgress = false;
                this.precent = 0;
            }
        },
        removeImg() {
            this.imgUrls = "";
            this.$emit("removeImg");
        },
        close() {
            this.ImgVisible = false;
        },
        previewImg() {
            this.ImgVisible = true;
        },
    },
};
</script>
<style scoped></style>